<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>商品管理</cite></a>
        <a><cite>编辑商品</cite></a>
    </div>
</div>
<div class="layui-fluid" id="baseApp">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">商品名</label>
                    <div class="layui-input-inline">
                        <input type="text" v-model="find.title" name="title" value="" lay-verify="required"
                                   placeholder="请输入..." autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缩略图</label>
                    <div class="layui-input-inline">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="thumbBtn">上传图片</button>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" :src="find.thumb" id="thumb" style="max-width:200px;max-height:200px;">
                            </div>
                        </div>
                        <input type="hidden" name="thumb">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">所属分类</label>
                    <div class="layui-input-inline append-category">

                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品描述</label>
                    <div class="layui-input-inline">
                        <textarea name="content" v-model="find.content" style="width: 400px;height:200px;" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-inline">
                        <input type="text" name="price" value="" lay-verify="required"
                                   placeholder="请输入..." v-model="find.price" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">库存</label>
                    <div class="layui-input-inline">
                        <input type="number" name="stock" lay-verify="required"
                                   placeholder="请输入..." v-model="find.stock" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="number" name="sort" lay-verify="required"
                                   placeholder="越大越靠前" v-model="find.sort" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">浏览数</label>
                    <div class="layui-input-inline">
                        <input type="number" name="views" v-model="find.views" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="state" v-model="find.state">
                            <option value="1" :selected="find.state == 1">显示</option>
                            <option value="0" :selected="find.state == 0">隐藏</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <input type="button" lay-submit lay-filter="layuiadmin-submit" value="确认" class="layui-btn">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'helper', 'laytpl', 'upload', 'element'], function () {
        var form = layui.form,
            $ = layui.$,
            setter = layui.setter,
            helper = layui.helper;
        let app = new Vue({
            el : '#baseApp' ,
            data : {
                find : {
                    id : '' ,
                    title : '' ,
                    thumb : '' ,
                    category_id : 0 ,
                    content : '' ,
                    price : 0 ,
                    stock : 0 ,
                    sort : 0 ,
                    state : 1 ,
                    views : 0 ,
                }
            } ,
            watch:{
                'find.state' : function(){
                    this.$nextTick(function(){
                        form.render('select')
                    })
                }
            } ,
            created(){
                var id = layui.router().search.id || '' , self = this;
                setTimeout(function(){
                    $('.layui-upload-img').each((e, item) => {
                        let id = $(item).attr('id') , uploadId = '#' + id + 'Btn' , url = setter.requestUrl + '/upload';
                        helper.uploadRender(uploadId , url , function (res) {
                            $(item).attr('src', res.data.path);
                            $('input[name=' + id + ']').val(res.data.url);
                        })
                    })
                } , 500)

                helper.get('/app/good-index/edit?id=' + id, function (res) {
                    let data = res.data;
                    if (data.find){
                        self.find = data.find;
                    }
                    if (data.category){
                        helper.renderSelect(data.category , 'category_id' , '.append-category')
                        form.render('select');
                    }
                    //监听提交
                    form.on('submit(layuiadmin-submit)', function (res) {
                        var field = res.field; //获取提交的字段
                        field.id  = id;
                        helper.post('/app/good-index/edit', field, function (res) {
                            helper.success(res.msg, function () {
                                window.location.hash = '#/---good/';
                            });
                        })
                    });
                })
            } ,
        });
    });
</script>